import React, { Component } from 'react';
import { View,Platform,SafeAreaView,StyleSheet,Text } from 'react-native';
import moment from 'moment';
import zhCn from 'moment/locale/zh-cn';
import constants from '../../../utils/constants';
import { Flex, Button, Toast, } from 'antd-mobile-rn';


//日期列表
const getDates = (date) => {

    const yesterday = moment(date).add(-1, "d").toDate();
    const dates = []
    for (let i = 0; i < 7; i++) {
        dates.push(moment(yesterday).add(i, "d").toDate());
    }
    return dates;

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        position: "relative"
    },
    dateItem: {
        alignItems: 'center',
        paddingTop: 5,
        paddingBottom: 15
    },
    dateItemActive: {
        backgroundColor:constants.themeColor,
        alignItems: 'center',
        paddingTop: 5,
        paddingBottom: 15

    },
    dateItemText: {
        color: "#000"
    },
    dateItemActiveText: {
        color: "#fff"
    },
    taskTitle: {
        borderLeftWidth: 3,
        borderLeftColor: constants.activeColor,
        paddingLeft: 5,
        flexDirection: "row",
        alignItems: "center",
        position: "relative"
    },
    taskTitleText: {
        color: "#000",
        fontSize: 16
    },
    studyView: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        paddingTop: 20,
        paddingBottom: 10
    },
    studyText: {
        textAlign: "center",
        marginRight: 5,
        marginTop: 15
    },
    studyHours: {
        color: constants.themeColor,
        fontSize: 45,
        fontWeight: "bold",
        textAlign: "center"
    },
    studyHoursText: {
        textAlign: "center",
        marginLeft: 5,
        marginTop: 15
    },
    taskListBox: {
        borderColor: "#cccccc",
        borderWidth: 1,
        fontSize: 12,
        width: 20,
        height: 20,
        textAlign: "center",
        alignItems: "center",
        justifyContent: "center",
        marginTop: 1,
        color: "#ccc"
    },
    taskListItemName: {
        fontSize: 16,
        color: "#000",
        marginLeft: 10
    },
    buttomBtnView: {
        position: "absolute",
        bottom: Platform.OS === 'android' ? 15 : 15,
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "row",
        width: "100%",

    },
    addTaskView: {
        backgroundColor: "#fff",
        borderBottomWidth: 1,
        borderColor: "#ddd",
        height: 65,
        bottom: Platform.OS === 'android' ? 0 : 0,



    },
    addTaskViewTextInput: {
        width: "100%",
        height: 65,
        paddingLeft: 50,
        fontSize: 16
    },
    buttomBtn: {
        borderRadius: 15,
        width: 120,
        height: 38,
        backgroundColor:"#fff"
        
    },
    standalone: {
        marginTop: 30,
        marginBottom: 30,
    },
    standaloneRowFront: {
        alignItems: 'center',
        backgroundColor: '#CCC',
        justifyContent: 'center',
        height: 50,
    },
    standaloneRowBack: {
        alignItems: 'center',
        backgroundColor: '#8BC645',
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        padding: 15
    },
    backTextWhite: {
        color: '#FFF'
    },
    rowFront: {

        alignItems: 'center',
        backgroundColor: '#ffffff',
        borderBottomColor: '#ddd',
        borderBottomWidth: 1,
        height: 68,
        flexDirection: "row",
        paddingLeft: 20
    },
    rowBack: {
        alignItems: 'center',
        backgroundColor: "transparent",
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingLeft: 15,
        borderBottomColor: '#ddd',
        borderBottomWidth: 1,
    },
    backRightBtn: {
        alignItems: 'center',
        bottom: 0,
        justifyContent: 'center',
        position: 'absolute',
        top: 0,
        width: 75
    },
    backRightBtnLeft: {
        backgroundColor: 'blue',
        right: 75
    },
    backRightBtnRight: {
        backgroundColor: constants.themeColor,
        right: 0
    },
    controls: {
        alignItems: 'center',
        marginBottom: 30
    },
    
});

/**
 * 日期
 */
class DateWeek extends Component {






    constructor(props) {
        super(props);
    }


    render() {

        const items = getDates(this.props.date);
        // const { items } = this.state;
        const { onItemClick, selectDateIndex } = this.props;

        /**
        * 获取日期样式
        * @param {} index 
        */
        const getDateItemStyle = (index) => {
            return index == selectDateIndex ? styles.dateItemActive : styles.dateItem;
        }

        const getDateItemTextStyle = (index) => {
            return index == selectDateIndex ? styles.dateItemActiveText : styles.dateItemText;
        }


        return (
            <Flex style={{ backgroundColor: "#CCCCCC" }}>
                {
                    items.map((date, index) => {
                        return (
                            <Flex.Item activeOpacity={0.3} key={index} style={getDateItemStyle(index)} onPressIn={() => { onItemClick(index, date) }}>
                                <View >
                                    <Text style={getDateItemTextStyle(index)}>{moment(date).format("dd")}</Text>
                                </View>
                                <View>
                                    <Text style={getDateItemTextStyle(index)}>{moment(date).format("DD")}</Text>
                                </View>
                            </Flex.Item>
                        )
                    })
                }
            </Flex>
        )
    }

}

/**
 * 学习首页
 */
export default class StudyNew extends Component{

    static navigationOptions = (e) => {
        return {
            title: "学习"
        }
    }

    state = {
        selectDateIndex: 1,
        currentDate: new Date(),
       
    }

    onDateItemClick = (index, date) => {
        this.setState({ selectDateIndex: index, currentDate: date });
        //this.loadTaskInfo(date);
    }

    render(){
        return (
            <View>
                <DateWeek 
                    date={this.state.currentDate}
                    selectDateIndex={this.state.selectDateIndex}
                    onItemClick={this.onDateItemClick.bind(this)}
                >
                </DateWeek>
            </View>
        )
    }

}